<template>
  <div class="right">
    <div class="random">
      <div class="svg">
        <svg t="1645097020681" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3089" id="mx_n_1645097020691" width="20" height="20">
          <path d="M880.2 634.1c-14.5-14.5-37.9-14.5-52.4 0s-14.5 37.9 0 52.4l85 85h-66.2-0.1c-78.3 0-151.6-34.9-201-95.6L512.6 512l133.1-163.8c49.4-60.8 122.6-95.6 201-95.6h66.1l-84.8 85c-14.5 14.5-14.5 37.9 0 52.4 7.2 7.2 16.7 10.8 26.2 10.8s19-3.6 26.2-10.9L1001.1 269l4.2-4.3c12.1-13.6 18.8-31 18.7-49.4 0-19.8-7.8-38.4-21.8-52.3l-122-122c-14.5-14.5-37.9-14.5-52.4 0s-14.5 37.9 0 52.4l85 85h-66.2-0.1c-100.7 0-195 44.8-258.5 123L464.8 453.2 341.6 301.5C278 223.3 183.7 178.4 82.9 178.4H37.1C16.6 178.4 0 195 0 215.5s16.6 37.1 37.1 37.1h45.8c78.4 0 151.7 34.9 201.2 95.8l133 163.7-133 163.7c-49.4 60.9-122.8 95.8-201.2 95.8H37.1C16.6 771.5 0 788.1 0 808.5c0 20.5 16.6 37.1 37.1 37.1h45.8c100.8 0 195.1-44.9 258.7-123.1l123.2-151.7 123.3 151.8c63.5 78.2 157.7 123 258.5 123H912.8l-84.9 85c-14.5 14.5-14.5 38 0 52.4 7.2 7.2 16.7 10.9 26.2 10.9s19-3.6 26.2-10.9l122.1-122.2c28.9-29 28.8-76-0.1-104.8L880.2 634.1z" fill="#ffffff" p-id="3090"></path>
        </svg>
      </div>
      &nbsp;
      <span>随机推荐</span>
    </div>
    <div class="list">
      <ul>
        <li v-for="(item,index) in randomList" :key="index" @click="goRandom(item)">
          <svg t="1645101245575" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2692" id="mx_n_1645101245576" width="16" height="16" style="margin-right:0.5rem">
            <path d="M748.854303 285.758061a31.030303 31.030303 0 0 0-22.434909-9.619394h-0.03103a31.030303 31.030303 0 0 0-22.49697 9.681454c-0.99297 1.05503-19.176727 20.293818-44.900849 52.689455-92.066909-171.566545-215.319273-295.842909-220.935757-301.490424a31.030303 31.030303 0 0 0-43.876849 0C381.145212 50.051879 74.78303 360.044606 74.78303 679.501576c0 188.167758 153.134545 341.271273 341.333334 341.271272h310.30303c136.874667 0 248.211394-115.991273 248.211394-258.544484 0-237.226667-216.560485-466.819879-225.776485-476.470303" fill="#EEAF4B" p-id="2693"></path>
            <path d="M648.936727 927.495758h-190.122666c-70.283636 0-132.716606-58.616242-135.602425-130.420364-4.344242-107.582061 76.179394-216.839758 115.122425-263.13697a26.561939 26.561939 0 0 1 40.928969 0.031031c26.313697 31.371636 71.68 91.632485 96.938667 160.643878a504.86303 504.86303 0 0 1 51.944727-76.613818 26.624 26.624 0 0 1 41.487515-0.155151c32.457697 39.625697 91.384242 123.438545 87.784728 205.88606-2.513455 57.157818-52.534303 103.765333-108.48194 103.765334" fill="#E48130" p-id="2694"></path>
          </svg>
          {{item.title}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
export default defineComponent({
  setup() {
    const randomList = ref([])
    onMounted(() => {
      randomList.value = JSON.parse(sessionStorage.getItem('random'))
    })

    const router = useRouter()
    const goRandom = (item) => {
      router.push('/read/' + item.title)
      localStorage.setItem('nowArticles_id', item.id)
    }
    return {
      randomList,
      goRandom,
    }
  },
})
</script>

<style lang="scss" scoped>
.right {
  margin-left: 0.5rem;
  flex: 1;
  .random {
    margin-top: 1.3rem;
    width: 10rem;
    height: 2rem;
    // box-shadow: 0.4rem 0.4rem 1rem rgb(196, 193, 193);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    .svg {
      width: 2rem;
      height: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 2rem;
      background: #3897ff;
      box-shadow: 0 4px 12px 0 rgba(0, 122, 255, 0.4);
    }
  }
  ul,
  li {
    list-style: none;
  }
  li {
    max-width: 16rem;
    background: #2e2f31;
    color: white;
    padding: 0.7rem;
    margin-left: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
  li:hover {
    background-position: 0 0%;
    background: #3d3e40;
    transition: background 0.3s ease;
  }
}
</style>